<template>
  <q-layout view="lHh Lpr lFf">
    <q-header class="bg-white text-primary">
      <q-toolbar>
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
        <q-toolbar-title>
          {{ routeLabel }}
        </q-toolbar-title>
        <div>
          Quasar v{{ $q.version }}
          <a
            class="tw-bottom-0 q-pa-md text-center tw-cursor-pointer"
            href="http://129.204.11.45:8894"
            target="_blank"
            >意见箱</a
          >
        </div>
      </q-toolbar>
    </q-header>
    <q-drawer class="tw-relative" bordered v-model="leftDrawerOpen" show-if-above>
      <ZLogo></ZLogo>
      <ZMenu></ZMenu>
    </q-drawer>
    <q-page-container class="no_scroll">
      <RouterView>
        <template v-slot:default="{ Component, route }">
          <transition
            appear
            enter-active-class="animated lightSpeedInLeft"
            leave-active-class="animated lightSpeedOutRight"
            mode="out-in"
          >
            <KeepAlive>
              <component class="container" :is="Component" :key="route.fullPath" />
            </KeepAlive>
          </transition>
          <!-- 无需缓存 -->
          <!--
          <transition
            appear
            enter-active-class="animated lightSpeedInLeft"
            leave-active-class="animated lightSpeedOutRight"
            mode="out-in"
          >
            <component :is="Component" :key="route.fullPath" />
          </transition>
          -->
        </template>
      </RouterView>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { ref, computed } from 'vue';
import ZMenu from './components/ZMenu/ZMenu.js';
import ZLogo from './components/ZLogo/ZLogo.vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const routeLabel = computed(() => route.meta.label);
// import { useMenuStore } from 'src/stores/menu';
// const menuStore = useMenuStore();
const leftDrawerOpen = ref(false);

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}
</script>
<style lang="scss" scoped>
.no_scroll {
  overflow-x: hidden;
}
.container {
  padding: 0 12px;
}
</style>
